<template>
  <div>
    <el-table
      :data="list"
     border
     :min-height="tabHeight"
     :height="tabHeight"
     style="max-width: 98%">
       <el-table-column type="expand">
          <template scope="props">
            <el-form label-position="left" inline class="export-table-expand">
              <el-form-item label="时间范围">
               <span>{{ J(props.row.query_para).begin_time }} - {{ J(props.row.query_para).end_time }}</span>
             </el-form-item>
             <el-form-item label="渠道 ID">
               <span>{{ J(props.row.query_para).channel_id }}</span>
             </el-form-item>
             <el-form-item label="手机号码">
               <span>{{ J(props.row.query_para).mobile_num }}</span>
             </el-form-item>
             <el-form-item label="客户名称">
               <span>{{ J(props.row.query_para).parent_name }}</span>
             </el-form-item>
             <el-form-item label="海报ID">
               <span>{{ J(props.row.query_para).poster_id }}</span>
             </el-form-item>
             <el-form-item label="来源ID">
               <span>{{ J(props.row.query_para).source_id }}</span>
             </el-form-item>
            </el-form>
          </template>
       </el-table-column>
       <el-table-column
         prop="insert_time"
         label="申请导出时间"
         >
       </el-table-column>
       <el-table-column
         prop="begin_time"
         label="查询开始时间"
         >
       </el-table-column>
       <el-table-column
         prop="end_time"
         label="查询结束时间"
         >
       </el-table-column>
       <el-table-column
         prop="report_type"
         label="报表类型"
         :formatter = "formateReportType"
         >
       </el-table-column>
       <el-table-column
        label="操作"
        width="110">
        <template scope="scope">
          <a v-if="scope.row.status === 'COM'" @click="download(scope)" class="download-link">下载报表</a>
          <a v-if="scope.row.status === 'ING'">处理中</a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="温馨提示"
      v-model="dialogVisible"
      size="tiny"
      :before-close="handleClose">
      <span>您确定要下载该文件吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resolve">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  var dateFormat = require('dateformat')

  import { Table, Button, TableColumn, Dialog, Form, FormItem } from 'element-ui'
  import { mapActions } from 'vuex'
  import N from '../lib/notification'
  import Q from 'q'

  export default {
    props: {
      tabHeight: {
        type: String | Number
      },
      deletable: {
        type: Boolean,
        default: true
      },
      timeStamp: {}
    },
    components: {
      [Table.name]: Table,
      [Button.name]: Button,
      [TableColumn.name]: TableColumn,
      [Dialog.name]: Dialog,
      [Form.name]: Form,
      [FormItem.name]: FormItem
    },
    watch: {
      loading (value) {
        this.$emit('changeLoading', value)
      },
      timeStamp () {
        this.loading = true
        this.refresh()
      }
    },
    methods: {
      showDeleteChannelDialog (scope) {
        this.dialogVisible = true
        this.deletedRow = scope.row
        console.log(JSON.stringify(scope.row))
      },
      toDate (timestamp) {
        return dateFormat(new Date(parseInt(timestamp)), 'yyyy-mm-dd h:MM:ss')
      },
      formateInsertTime (row) {
        return this.toDate(row.insert_time)
      },
      formateBeginTime (row) {
        return this.toDate(row.begin_time)
      },
      formateEndTime (row) {
        return this.toDate(row.end_time)
      },
      refresh () {
        this.getExports().then((response) => {
          if (response.data.errcode === 0) {
            let result = []
            if (typeof response.data.results === 'string') {
              result = this.J(response.data.results)
            } else {
              result = response.data.results
            }
            this.list = result
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      J (value) {
        if (!this.cache[value]) {
          try {
            this.cache[value] = JSON.parse(value)
          } catch (e) {
            this.cache[value] = {}
            console.log(e)
          }
        }
        return this.cache[value]
      },
      formateReportType (row) {
        let reportType = '普通'
        if (row.report_type === 'CL#') {
          reportType = '客户名单导出'
        }
        return reportType
      },
      download (scope) {
        console.log(scope)
        Q.Promise((resolve) => {
          this.dialogVisible = true
          this.resolve = resolve
        }).then(() => {
          this.dialogVisible = false
          window.open(scope.row.download_url)
        })
      },
      converTime (timestamp, separator) {
        var pad = function(input) {
          return input < 10 ? "0" + input : input;
        };
        var date = timestamp ? new Date(timestamp * 1000) : new Date();
        return [
            pad(date.getHours()),
            pad(date.getMinutes()),
            pad(date.getSeconds())
        ].join(typeof separator !== 'undefined' ?  separator : ':' );
      },
      handleClose () {

      },
      ...mapActions({
        getExports: 'getExports'
      })
    },
    mounted () {
      this.loading = true
      this.refresh()
    },
    data () {
      return {
        loading: false,
        dialogVisible: false,
        deletedRow: null,
        list: [],
        cache: {},
        resolve () {}
      }
    }
  }
</script>
<style lang="scss">
  .download-link {
    color: #20a0ff;
    cursor: pointer;
  }

  .export-table-expand {
    font-size: 0;

    .el-form-item__content {
      vertical-align: top;
    }
  }

  .export-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .export-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
